<template>
  <div>
    <el-collapse v-model="isActive">
      <el-collapse-item title="基础信息" name="0" class="fff">
        <el-row class="card">
          <el-col :span="6">
            <p>货主编号</p>
            <div>{{ info.code }}</div>
          </el-col>
          <el-col :span="6">
            <p>货主名称</p>
            <div>{{ info.name }}</div>
          </el-col>
          <el-col :span="6">
            <p>联系人</p>
            <div>{{ info.personName }}</div>
          </el-col>
          <el-col :span="6">
            <p>联系人电话</p>
            <div>{{ info.phone }}</div>
          </el-col>
          <el-col :span="6">
            <p>联系人邮箱</p>
            <div>{{ info.email||'无' }}</div>
          </el-col>
          <el-col :span="6">
            <p>省/市/区</p>
            <div>{{ info.location }}</div>
          </el-col>
          <el-col :span="12">
            <p>详细地址</p>
            <div>{{ info.address||'无' }}</div>
          </el-col>
          <el-col :span="24">
            <p>备注</p>
            <div>{{ info.remark||'无' }}</div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="库位信息" name="1" class="fff">
        <div v-if="isNowData" class="now-data">
          <span class="imgIcon" /><span style="color: #b5abab;">暂无数据</span>
        </div>
        <template v-else>
          <div class="infoTip">总计：{{ tableData.total }}个库位 {{ info.goodsTotal }}个 货品</div>
          <el-table
            :data="tableData.records"
            stripe
            border
            :row-style="{}"
            :header-cell-style="{
              background: '#f9f6ee',
              borderColor: '#f5efee!important',
              padding: '10px 0',
            }"
            :cell-style="{ borderColor: '#f5efee!important', padding: '10px 0' }"
          >
            <el-table-column label="序号" width="68" align="center">
              <template v-slot="{ $index }">{{ $index + 1 }}</template>
            </el-table-column>
            <el-table-column
              prop="warehouseName"
              label="仓库名称"
              align="center"
            />
            <el-table-column
              prop="areaName"
              label="库区名称"
              align="center"
            />
            <el-table-column
              prop="locationCode"
              label="库位编号"
              align="center"
            />
            <el-table-column
              prop="locationName"
              label="库位名称"
              align="center"
            />
          </el-table>
          <PageTools
            :data="tableData"
            @handleSizeChange="handleSizeChangeFn"
            @handleCurrentChange="handleCurrentChangeFn"
          />
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getOwnerDetails } from '@/api/owner'
import { getOwnerLocationDetailsList } from '@/api/ownerLocation'
export default {
  data() {
    return {
      isActive: ['0'],
      info: {
        name: '',
        code: '',
        personName: '',
        phone: '',
        email: '',
        location: '',
        remark: '',
        goodsTotal: ''
      },
      tableData: {}
    }
  },
  computed: {
    isNowData() {
      return !this.tableData?.records?.length
    }
  },
  created() {
    this.getOwnerDetails()
    this.getOwnerLocationDetailsList()
  },
  methods: {
    async getOwnerDetails() {
      const { data } = await getOwnerDetails(this.$route.params.id)
      this.info = data
    },
    async getOwnerLocationDetailsList() {
      const { data } = await getOwnerLocationDetailsList({ ownerId: this.$route.params.id })
      this.tableData = data
    },
    handleSizeChangeFn(val) {
      this.searchForm.size = val
      this.searchForm.current = 1
      this.getWarehouseList()
    },
    handleCurrentChangeFn(val) {
      this.searchForm.current = val
      this.getWarehouseList()
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  background: #fdfcf9;
  border: 1px solid #f7f2f1;
  padding: 25px 30px;
  p{
    margin:10px 0 0;
    color: #888;
  }
}
  .infoTip {
    display: inline-block;
    height: 32px;
    line-height: 30px;
    background: #fff9eb;
    border: 1px solid #ffb200;
    padding: 0 25px;
    margin: 20px 0;
}
</style>
